<template>
    <view class="container">
        <u-navbar :is-back="false" :background="{ backgroundColor: 'transparent' }" :border-bottom='false'>
            <view class="f_sb_c p032">
                <u-icon @click="leftBack" name="https://file.tcwang.cc/iconSet/care_back.png" size="64" />
                <view>
                    <u-icon @click="download" name="https://file.tcwang.cc/iconSet/care_download.png" size="64" />
                    <u-icon class="ml36" @click="share" name="https://file.tcwang.cc/iconSet/care_share.png"
                        size="64" />
                </view>
            </view>
        </u-navbar>
        <!-- 生日 -->
        <view v-if="1" class="page0">
            <view class="content">
                <view class="f_fs_c">
                    <image class="avater_icon" :src="avatar || 'https://file.tcwang.cc/iconSet/avater_icon.png'" />
                    <view class="f_fs_fs f_column ml20">
                        <text class="text_34_333 text_bold">赵明志</text>
                        <text class="text_26_999">TC16959</text>
                    </view>
                </view>
                <view class="text_28_333">成长不期而遇 ，生日如约而至。</view>
                <view class="text_28_333">公司送你一天生日假期与抽奖惊喜，</view>
                <view class="text_28_333">愿新岁的你生活灿烂，事业顺利，</view>
                <view class="text_28_333">梦想成真，我们与你同在！</view>
                <view class="text_28_333">祝你生日快乐！</view>
            </view>
        </view>
        <image v-if="0" class="lucky_draw" src="https://file.tcwang.cc/iconSet/lucky_draw.png" />
        <!-- 入职周年 -->
        <view v-if="0" class="page1">
            <view class="content">
                <view class="f_fs_c">
                    <image class="avater_icon" :src="avatar || 'https://file.tcwang.cc/iconSet/avater_icon.png'" />
                    <view class="f_fs_fs f_column ml20">
                        <text class="text_34_333 text_bold">赵明志</text>
                        <text class="text_26_999">TC16959</text>
                    </view>
                </view>
                <view class="ml44 title">一路相伴 感谢有你</view>
                <view class="ml44 subtitle">—— THANK YOU ——</view>
                <view class="ml44 text_28_333">Dear赵敏：</view>
                <view class="ml44 text_28_333">
                    时光悄然流转，祝贺你入职已满三周年！在这三年里，你的努力与贡献有目共睹。公司特意为你准备了一份红包，以此表达对你的感谢与认可。愿你在未来的日子里继续绽放光彩，与公司携手共进，书写更多精彩篇章！我们期待与你一起创造更多美好的回忆和成就！
                </view>
                <view class="ml44 text_28_333">宅喔人事部</view>
                <view class="ml44 text_28_333">2023年12月26日</view>
            </view>
        </view>
        <view v-if="0" class="page2">
            <view class="content">
                <view class="f_fs_c">
                    <image class="avater_icon" :src="avatar || 'https://file.tcwang.cc/iconSet/avater_icon.png'" />
                    <view class="f_fs_fs f_column ml20">
                        <text class="text_34_333 text_bold">赵明志</text>
                        <text class="text_26_999">TC16959</text>
                    </view>
                </view>
                <view class="text_content">
                    <view class="text_32_FFF text_bold" style="color: #FFE2AF;">Dear赵敏：</view>
                    <view class="text_28_FFF text_indent">
                        根据您在试用期内的优异工作能力和表现，符合我司职位的要求，现经公司领导批准，同意您的转正，并按照公司相关规定享受正式员工的全部待遇。
                    </view>
                    <view class="text_28_FFF text_indent">
                        希望您再接再厉，与公司共创辉煌！
                    </view>
                    <view class="text_28_FFF">宅喔人事部</view>
                    <view class="text_28_FFF">2023年12月26日</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import uNavbar from '../../uview-ui/components/u-navbar/u-navbar.vue'
export default {
    components: { uNavbar },
    data() {
        return {
            avatar: ''
        }
    },
    onLoad({ obj }) {
    },
    methods: {
        leftBack() {
            console.log('返回');
            // uni.navigateBack()
        },
        download() {
            console.log('下载');
        },
        share() {
            console.log('分享');
        },
    }
}
</script>

<style lang="scss" scoped>
@import "@/common/libs/common.scss";

.container {
    position: relative;
    width: 750rpx;
    height: 100vh;

    .slot-wrap {
        background: transparent;
    }

    .lucky_draw {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 200rpx;
        width: 212rpx;
        height: 212rpx;
    }
}


.page2 {
    background-image: url("https://file.tcwang.cc/iconSet/conversion_notice.png");

    .content {
        margin-top: 442rpx;
        margin-left: 58rpx;

        .avater_icon {
            width: 110rpx;
            height: 110rpx;
            background: linear-gradient(226deg, #FBCB93 0%, #FFFAE3 51%, #E9BF97 100%);
            padding: 8rpx;
            border-radius: 50%;
        }

        .text_content {
            margin-top: 128rpx;
            margin-left: 90rpx;
            width: 580rpx;

            .text_indent {
                text-indent: 10rpx;
            }
        }
    }
}

.page0,
.page1,
.page2 {
    position: absolute;
    top: 0;
    width: 750rpx;
    height: 100vh;
    background-image: url("https://file.tcwang.cc/iconSet/conversion_notice.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.page0 {
    background-image: url("https://file.tcwang.cc/iconSet/birth_care.png");

    .content {
        // position: absolute;
        transform: rotate(-15deg);
        margin-top: 444rpx;
        margin-left: 226rpx;

        .avater_icon {
            width: 100rpx;
            height: 100rpx;
        }

        .f_fs_c {
            margin-bottom: 36rpx;
        }

        .text_28_333 {
            margin-bottom: 36rpx;
        }
    }
}

.page1 {
    background-image: url("https://file.tcwang.cc/iconSet/entry_anniversary.png");

    .content {
        // background: blanchedalmond;
        margin-top: 186rpx;
        margin-left: 62rpx;

        .avater_icon {
            width: 110rpx;
            height: 110rpx;
            background: linear-gradient(226deg, #FBCB93 0%, #FFFAE3 51%, #E9BF97 100%);
            padding: 8rpx;
            border-radius: 50%;
        }

        .title {
            width: 446rpx;
            height: 64rpx;
            font-weight: 900;
            font-size: 54rpx;
            color: #A3673B;
            line-height: 64rpx;
            margin-top: 86rpx;
        }

        .subtitle {
            width: 320rpx;
            height: 40rpx;
            font-weight: bold;
            font-size: 30rpx;
            color: #DAAD8C;
            line-height: 40rpx;
            margin-top: 14rpx;
            margin-bottom: 28rpx;
        }

        .title,
        .subtitle {
            width: 538rpx;
            text-align: center;
        }

        .text_28_333 {
            width: 538rpx;
            margin-bottom: 12rpx;
            line-height: 54rpx !important;
        }

        .text_28_333:not(:nth-child(2)) {
            line-height: 40rpx;
        }

        .text_28_333:nth-last-child(2),
        .text_28_333:last-child {
            text-align: right;
            margin-bottom: 0rpx;
        }

        .ml44 {
            margin-left: 44rpx;
        }
    }
}
</style>